<template>
  <PageContainer>
    <a-card title="个人信息中心" class="card">
      <a-descriptions :column="3" bordered>
        <a-descriptions-item label="用户名">
          <a-typography>
            <a-typography-paragraph>
              {{ formData.personalInfo.username }}
            </a-typography-paragraph>
          </a-typography>
        </a-descriptions-item>
        <a-descriptions-item label="真实姓名">
          <a-typography>
            <a-typography-paragraph>
              {{ formData.personalInfo.realName }}
            </a-typography-paragraph>
          </a-typography>
        </a-descriptions-item>

        <a-descriptions-item label="员工编号">
          <a-typography>
            <a-typography-paragraph>
              {{ formData.personalInfo.employeeNumber }}
            </a-typography-paragraph>
          </a-typography>
        </a-descriptions-item>
        <a-descriptions-item label="证件类型">
          <a-typography>
            <a-typography-paragraph>
              {{ getDocumentTypeName(formData.personalInfo.documentType) }}
            </a-typography-paragraph>
          </a-typography>
        </a-descriptions-item>
        <a-descriptions-item label="证件号码">
          <a-typography>
            <a-typography-paragraph>
              {{ formData.personalInfo.documentNumber }}
            </a-typography-paragraph>
          </a-typography>
        </a-descriptions-item>
        <a-descriptions-item label="手机号">
          <a-typography>
            <a-typography-paragraph>
              {{ formData.personalInfo.mobile }}
            </a-typography-paragraph>
          </a-typography>
        </a-descriptions-item>
        <a-descriptions-item label="邮箱">
          <a-typography>
            <a-typography-paragraph>
              {{ formData.personalInfo.email }}
            </a-typography-paragraph>
          </a-typography>
        </a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-typography>
            <a-typography-paragraph>
              {{ getUserStatusName(formData.personalInfo.status) }}
            </a-typography-paragraph>
          </a-typography>
        </a-descriptions-item>
        <a-descriptions-item label="联系地址">
          <a-typography>
            <a-typography-paragraph>
              {{ formData.personalInfo.contactAddress }}
            </a-typography-paragraph>
          </a-typography>
        </a-descriptions-item>
        <a-descriptions-item label="备注">
          <a-typography>
            <a-typography-paragraph>
              {{ formData.personalInfo.remark }}
            </a-typography-paragraph>
          </a-typography>
        </a-descriptions-item>
        <a-descriptions-item label="操作">
          <a-button @click="() => showPasswordModal(formData.companyInfo.id)">修改密码</a-button>
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card title="公司信息" class="card">
      <a-descriptions :column="3" bordered>
        <a-descriptions-item label="统一社会信用代码">
          <a-typography>
            <a-typography-paragraph>
              {{ formData.companyInfo.unifiedSocialCreditCode }}
            </a-typography-paragraph>
          </a-typography>
        </a-descriptions-item>
        <a-descriptions-item label="公司全称">
          <a-typography>
            <a-typography-paragraph>
              {{ formData.companyInfo.companyFullName }}
            </a-typography-paragraph>
          </a-typography>
        </a-descriptions-item>
        <a-descriptions-item label="服务有效期时间">
          <a-typography>
            <a-typography-paragraph>
              {{ formattedServiceValidityPeriod }}
            </a-typography-paragraph>
          </a-typography>
        </a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-typography>
            <a-typography-paragraph>
              {{ getCompanyStatusName(formData.companyInfo.status) }}
            </a-typography-paragraph>
          </a-typography>
        </a-descriptions-item>
        <a-descriptions-item label="简称">
          <a-typography>
            <a-typography-paragraph>
              {{ formData.companyInfo.shortName }}
            </a-typography-paragraph>
          </a-typography>
        </a-descriptions-item>
        <a-descriptions-item label="企业代码">
          <a-typography>
            <a-typography-paragraph>
              {{ formData.companyInfo.enterpriseCode }}
            </a-typography-paragraph>
          </a-typography>
        </a-descriptions-item>
        <a-descriptions-item label="联系电话">
          <a-typography>
            <a-typography-paragraph>
              {{ formData.companyInfo.contactPhone }}
            </a-typography-paragraph>
          </a-typography>
        </a-descriptions-item>
        <a-descriptions-item label="联系座机">
          <a-typography>
            <a-typography-paragraph>
              {{ formData.companyInfo.contactTelephone }}
            </a-typography-paragraph>
          </a-typography>
        </a-descriptions-item>
        <a-descriptions-item label="联系人">
          <a-typography>
            <a-typography-paragraph>
              {{ formData.companyInfo.contactName }}
            </a-typography-paragraph>
          </a-typography>
        </a-descriptions-item>
        <a-descriptions-item label="联系地址">
          <a-typography>
            <a-typography-paragraph>
              {{ formData.companyInfo.contactAddress }}
            </a-typography-paragraph>
          </a-typography>
        </a-descriptions-item>
        <a-descriptions-item label="备注">
          <a-typography>
            <a-typography-paragraph>
              {{ formData.companyInfo.remark }}
            </a-typography-paragraph>
          </a-typography>
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
  </PageContainer>
  <PasswordEditModal ref="passwordEditModalRef" />
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive } from 'vue';
import { getData } from '@/services';
import { PageContainer as PageContainer } from '@ant-design-vue/pro-layout';
import usePasswordData from '@/views/user/composables/usePasswordData';
import PasswordEditModal from '@/views/user/components/PasswordEditModal.vue';
import usePassword from '@/views/user/composables/usePassword';

const formData = reactive({
  personalInfo: {
    id: '',
    username: '',
    realName: '',
    password: '',
    doublePassword: '',
    originalPassword: '',
    employeeNumber: '',
    documentType: '',
    documentNumber: '',
    mobile: '',
    email: '',
    status: '',
    contactAddress: '',
    remark: '',
  },
  companyInfo: {
    id: '',
    unifiedSocialCreditCode: '',
    companyFullName: '',
    serviceValidityPeriod: [] as [string, string],
    status: '',
    shortName: '',
    enterpriseCode: '',
    contactPhone: '',
    contactTelephone: '',
    contactName: '',
    contactAddress: '',
    remark: '',
  },
});

const formattedServiceValidityPeriod = computed(() => {
  const [start, end] = formData.companyInfo.serviceValidityPeriod;
  return start && end ? `${start} 到 ${end}` : '未设置';
});

const loadUserInfo = async () => {
  const res = await getData('/api/auth/rbacUser/current/one');
  if (res.success) {
    formData.personalInfo = res.data;
    formData.personalInfo.validityPeriod = [
      res.data.validityPeriodBegin,
      res.data.validityPeriodEnd,
    ];
  }
};

const loadTenantInfo = async () => {
  const res = await getData('/api/auth/tTenant/current/one');
  if (res.success) {
    formData.companyInfo = res.data;
    formData.companyInfo.serviceValidityPeriod = [
      res.data.serviceValidityPeriodBegin,
      res.data.serviceValidityPeriodEnd,
    ];
  }
};

onMounted(() => {
  loadUserInfo();
  loadTenantInfo();
});


const { showPasswordModal, passwordEditModalRef } = usePassword();



const getDocumentTypeName = (type: string) => {
  switch (type) {
    case '0':
      return '未知';
    case '1':
      return '身份证';
    default:
      return '未知';
  }
};

const getUserStatusName = (status: string) => {
  switch (status) {
    case '1':
      return '启用';
    case '0':
      return '禁用';
    case '2':
      return '离职';
    default:
      return '未知';
  }
};

const getCompanyStatusName = (status: string) => {
  switch (status) {
    case '1':
      return '正常';
    case '0':
      return '停用';
    default:
      return '未知';
  }
};
</script>
